<template>
  <el-form
    ref="ruleFormRef"
    :model="eotForm"
    :rules="rules"
    class="demo-ruleForm"
    label-position="top"
    size="small"
  >
    <!-- <el-form-item
      :label="t('ikea.seq')"
      prop="payload.seq"
      placeholder="消息发送者编号"
      @keyup.enter="submitForm(ruleFormRef)"
    >
      <el-input v-model="eotForm.data" />
    </el-form-item> -->

    <el-form-item>
      <el-button
        type="primary"
        @click="submitForm(ruleFormRef)"
        :disabled="!ikeaClientStatus"
        :loading="loading"
      >
        {{ t('ikea.send') }}
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">
        {{ t('ikea.reset') }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { sendMessageByClient, sendMessageByServer } from '@/api/ikea'
import { ikeaStore } from '@/store/ikeaStore'
import { storeToRefs } from 'pinia'

const store = ikeaStore()

const loading = ref(false)

const { ikeaClientStatus, ikeaServerPort } = storeToRefs(store) // 连接状态

const { t } = useI18n()
const ruleFormRef = ref<FormInstance>()

const eotForm = reactive({
  type: 'Eot'
})

const rules = reactive<FormRules>({
  data: [
    {
      required: true,
      message: '请填写数据',
      trigger: 'blur'
    }
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      sendMessageByClient(eotForm).then(res => {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'success',
          duration: 1000
        })
      }).finally(() => {
        loading.value = false
      })
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
